<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jQuery实现漂亮的购物车</title>
  <link href="shopcart.css" rel="stylesheet">
</head>

<body>
  <div class="page-shopping-cart" id="shopping-cart">
    <h4 class="cart-title">我的购物清单</h4>
    <div class="cart-product-title clearfix">
      <!--{'check-true':isSelectAll}-->
      <div class="td-check fl"><span class="check-span fl check-all check-true"></span>全选</div>
      <div class="td-product fl">商品</div>
      <div class="td-num fl">数量</div>
      <div class="td-price fl">单价(元)</div>
      <div class="td-total fl">金额(元)</div>
      <div class="td-do fl">操作</div>
    </div>
    <div class="cart-product clearfix">
      <table>
        <tbody>
          <tr >
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="timg.png">
              <div class="product-info">
                <h6>iphone6s</h6>
                <p>品牌：iphone&nbsp;&nbsp;产地：美国</p>
                <p>配送仓储：上海仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="1" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">2000.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">2000</span>.00</p>
            </td>
            <td class="td-do">
			      <a href="javascript:;" class="product-btn green">收藏</a>
			      <a href="javascript:;" class="product-btn del">移除</a>
			      </td>
          </tr>
		  <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="shoe.png">
              <div class="product-info">
                <h6>vans板鞋</h6>
                <p>品牌：vans&nbsp;&nbsp;产地：美国</p>
                <p>配送仓储：上海仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="3" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">400.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">1200</span>.00</p>
            </td>
            <td class="td-do">
			  <a href="javascript:;" class="product-btn green">收藏</a>
			  <a href="javascript:;" class="product-btn del">移除</a>
			  </td>
      </tr>
		  
		  <tr>
            <td class="td-check"><span class="check-span check-true"></span></td>
            <td class="td-product"><img width="98" height="98" src="pidai.png">
              <div class="product-info">
                <h6>皮带</h6>
                <p>品牌：lv&nbsp;&nbsp;产地：韩国</p>
                <p>配送仓储：广州仓库</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
                <input type="text" class="num-input" value="4" readonly>
                <a href="javascript:;" class="num-add num-do fr"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">1000.00</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">4000</span>.00</p>
            </td>
            <td class="td-do">
			 <a href="javascript:;" class="product-btn green">收藏</a>
			  <a href="javascript:;" class="product-btn del">移除</a>
			</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="cart-product-info">
      <a class="delect-product" href="javascript:;"><span></span>删除所选商品</a>
      <a class="keep-shopping" href="#"><span></span>继续购物</a>
      <a class="btn-buy fr" href="javascript:;">结算</a>
      <p class="fr product-total">￥<span>7200.00</span></p>
      <p class="fr check-num">共<strong><span>3</span></strong>件商品总计(不含运费)：</p>
    </div>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
     var productList = [
        {
          'pro_name': 'iphone6s',//产品名称
          'pro_brand': 'iphone',//品牌名称
          'pro_place': '美国',//产地
          'pro_depot': '上海仓库',//所在仓库
          'pro_num': 3,//数量
          'pro_img': './timg.png',//图片链接
          'pro_price': 2000,
          //单价
        },
        {
          'pro_name': 'vans板鞋',//产品名称
          'pro_brand': 'vans',//品牌名称
          'pro_place': '美国',//产地
          'pro_depot': '北京仓库',//所在仓库
          'pro_num': 3,//数量
          'pro_img': './shoe.png',//图片链接
          'pro_price': 400//单价
        },
        {
          'pro_name': '皮带',//产品名称
          'pro_brand': 'lv',//品牌名称
          'pro_place': '韩国',//产地
          'pro_depot': '广州仓库',//所在仓库
          'pro_num': 3,//数量
          'pro_img': './pidai.png',//图片链接
          'pro_price': 1000//单价
        }
	];
      //移入收藏
          $(".green").click(function(){
            var ctrl=(navigator.userAgent.toLowerCase()).indexOf('mac')!=-1?'Command/Cmd': 'CTRL';
            if(document.all){
              window.e0xternal.addFavorite('');
            }
            else if(window.sidebar){
              window.sidebar.addPanel( '' );
            }
            else{
              alert('您可以通过快捷键' + ctrl + ' + D 加入到收藏夹');}
          })
      //单个删除
         $(".del").click(function(){
           $(this).parent().parent().empty();
         })
          //隔行变色
          $('tr:odd').css('background-color', '#F8F8F8');
          //单选
          $('.check-span').on('click', function () {
             if (!$(this).hasClass("check-true")) {
            $(this).addClass('check-true');
            } else {
            $(this).removeClass('check-true');
            }
            if (!$(this).hasClass("check-true")) {
            $('.check-all').removeClass('check-true')
           }
         });
</script>
</html>      